<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery.mini.js"></script>


    <style type="text/css">

        /*第一种方法*/
   /*     .panel {
            margin-top: 200px;
            display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
        }
        .content{
            width: 200px;
            height: 200px;
            border:1px solid #ccc;
            margin-right: 30px;
        }
*/
        /*第二种方法*/
        .panel {
            background-color: white;
            border-bottom: 1px solid red;
            padding: 20px 0;
            white-space: nowrap;
            overflow: auto;
            -ms-scroll-limit-x-max: 0;
            overflow-y: hidden;
        }
        .content{
            text-align: center;
            display: inline-block;
            padding: 0 3px;
            font-size: 25px;
            color: blue;
            position: relative;
        }
    </style>
</head>
<body>


<div class="panel">
    <div class="content">
        哈哈111
    </div>

    <div class="content">
        哈哈222
    </div>
    <div class="content">
        哈哈333
    </div>
    <div class="content">
        哈哈444
    </div>
    <div class="content">
        哈哈555
    </div>
    <div class="content">
        哈哈666
    </div>
    <div class="content">
        哈哈777
    </div>
    <div class="content">
        哈哈999
    </div>
    <div class="content">
        哈哈1010
    </div>
    <div class="content">
        哈哈1111
    </div>
    <div class="content">
        哈哈1212
    </div>
</div>


</body>
</html>